<template>
    <div>
        <Head>
            <Title>PrimeVue Roadmap</Title>
            <Meta name="description" content="PrimeVue Roadmap" />
        </Head>

        <div class="doc-intro">
            <h1>Roadmap</h1>
            <p>
                At <a href="https://www.primetek.com.tr/">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2025 with the community. These are planned to be implemented in parallel to the regular
                maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support.
            </p>
        </div>

        <div class="overflow-auto">
            <div style="min-width: 1200px">
                <div class="flex gap-4 mb-4">
                    <div class="shrink-0 w-56"></div>
                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q1</div>
                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q2</div>
                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q3</div>
                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q4</div>
                </div>

                <div class="flex flex-col gap-4">
                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                        <div class="shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">New Theme Editor</h2>
                                <p class="mt-0 mb-4 leading-normal">Advanced visual theme designer with support for the entire design token set, Figma to code and cloud storage.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">@primeuix/themes</h2>
                                <p class="mt-0 mb-4 leading-normal">Migrate to the new theming package that is shared between all Prime UI libraries.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Tailwind v4</h2>
                                <p class="mt-0 mb-4 leading-normal">Update styled mode integration to support Tailwind v4.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 100%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Maintenance and Quality</h2>
                                <p class="mt-0 mb-4 leading-normal">Revamp the overall qualify by frequent releases based on community feedback.</p>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">New Volt Components</h2>
                                <p class="mt-0 mb-4 leading-normal">Implement new components for Volt UI Suite.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Maintenance and Quality</h2>
                                <p class="mt-0 mb-4 leading-normal">Revamp the overall qualify by frequent releases based on community feedback.</p>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">PrimeVue+</h2>
                                <p class="mt-0 mb-4 leading-normal">Initiate Advanced UI suite with complex components including Event Calendar, Data Grid, Text Editor, Charts, Gantt Chart, TimeLine, PDF Viewer...</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                        <div class="shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">FIGMA UI KIT</div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Updates to Sync PrimeVue Design Tokens</h2>
                                <p class="mt-0 mb-4 leading-normal">Continuous updates to sync the design tokens in Figma with the theme code.</p>
                                <div class="bg-surface-200 rounded invisible">
                                    <div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                        <div class="shrink-0 p-4 bg-violet-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">TEMPLATES</div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Poseidon Remaster</h2>
                                <p class="mt-0 mb-4 leading-normal">Remastered version of Poseidon with a brand new design</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-violet-500 rounded" style="width: 100%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Avalon Remaster</h2>
                                <p class="mt-0 mb-4 leading-normal">Redesigned version of Avalon with a fresh look and feel.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-violet-500 rounded" style="width: 100%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-violet-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">New Demo Content</h2>
                                <p class="mt-0 mb-4 leading-normal">Update the included shared demo pages such as Mail, Chat, File Manager, CMS and more.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-violet-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                    </div>
                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                        <div class="shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Remastered Marketing Blocks with 30+ New blocks</h2>
                                <p class="mt-0 mb-4 leading-normal">Enhanced all marketing blocks and include 30 new blocks.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-orange-500 rounded" style="width: 100%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Remastered Application Blocks</h2>
                                <p class="mt-0 mb-4 leading-normal">Improve application blocks and include new blocks.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-orange-500 rounded" style="width: 100%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Remastered E-Commerce Blocks</h2>
                                <p class="mt-0 mb-4 leading-normal">Improve e-commerce blocks and include new blocks.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-orange-500 rounded" style="width: 90%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-4">
                                <h2 class="text-lg font-bold mt-0 mb-2">Tailwind v4 Upgrade</h2>
                                <p class="mt-0 mb-4 leading-normal">Update the Tailwind version of Blocks to v4.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
